

<template>
  <div class="app" :style="{transform: `scale(${scaleValue})  translate(-50%, -50%`}" >
    <Head />
    <div class="line1"> 
      <Box1 />
      <Box2 />
      <Box3 />
    </div>
    <div class="line2"> 
      <Box4 />
      <Box5 />
    </div>

  
  </div> 
</template>

<script setup lang="ts"> 

  import { ref,onMounted ,onUnmounted} from 'vue' 
  import { scale } from './utils/index'
  import Box1  from './components/box1/index.vue'
  import Box2  from './components/box2/index.vue'
  import Box3  from './components/box3/index.vue'
  import Box4  from './components/box4/index.vue'
  import Box5  from './components/box5/index.vue'
  import Head  from './components/header/index.vue'

  const scaleValue = ref(1)
  const updateScale = () => {
    scaleValue.value = scale()
  }

  onMounted(() => {
    updateScale()
    window.addEventListener('resize',updateScale)
  })

  onUnmounted(() => {
    window.removeEventListener('resize',updateScale)
  }) 


</script>

<style scoped>
  

</style>
